<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
const colors = ["#5470C6", "#91CC75", "#EE6666"];
const option = ref({});

const setOption = async (newData: any) => {
  option.value = {
    legend: {
      data: ["订单总数", "订单金额统计", "支付成功率"],
      textStyle: {
        color: "white",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    xAxis: [
      {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "订单金额统计",
        min: 0,
        axisLabel: {
          formatter: "{value} ￥",
        },
      },
      {
        type: "value",
        name: "支付成功率",
        min: 0,
        max: 100,
        axisLabel: {
          formatter: "{value} %",
        },
      },
    ],
    series: [
      {
        name: "订单总数",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value + " ml";
          },
        },
        data: [
          2, 4, 7, 3, 6, 7, 6, 2, 6, 2, 4, 3,
        ],
      },
      {
        name: "订单金额统计",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value + " ￥";
          },
        },
        data: [
          6, 9, 9, 4, 7, 7, 6, 2, 7, 8, 6, 3,
        ],
      },
      {
        name: "支付成功率",
        type: "line",
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + " %";
          },
        },
        data: [
          98, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99,
        ],
      },
    ],
  };
};

onMounted(() => {
  setOption({});
});
</script>

<template>
  <v-chart
    class="chart"
    :option="option"
    v-if="JSON.stringify(option) != '{}'"
  />
</template>

<style scoped lang="scss"></style>
